<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">
<h:head>

	<style type="text/css">
.ui-layout-north {
	z-index: 20 !important;
	overflow: visible !important;;
}

.ui-layout-north .ui-layout-unit-content {
	overflow: visible !important;
}

.ui-widget {
	font-size: 10px !important;
}

.size {
	width: 550px;
	position: relative;
	left: 30%;
	top: 10%;
}

.centro {
	top: 50%
}

.tabela {
	width: 750px;
}
</style>


	<title>Cadastro de Elemento</title>
</h:head>

<h:body>
	<ui:decorate template="/templateBase.xhtml">

		<ui:define name="center">
			<p:growl id="growl" life="3000" autoUpdate="true" />
			<h:form prependId="true" id="formCadastroElemento">
				<br />
				<br />
				<br />
				<br />
				<p:panel header="Cadastro de Elemento" styleClass="size"
					toggleable="true"
					footer="SIGLAS - Sistema de Gerenciamento de Laboratório de Análise de Solo">

					<br />
					<div align="center">
						<h:panelGrid columns="3">
							<h:outputText value="Elemento: " />
							<p:inputText size="50"
								value="#{ElementoBacking.elementoSalvar.descricao}"
								required="true" requiredMessage="Informe o nome do elemento!" />
							<p:commandButton icon="ui-icon-search" oncomplete="dlg.show()"
								actionListener="#{ElementoBacking.criarListaElemento}"
								update=":formPesquisaElemento:tabelaElemento" process="@all"
								immediate="true" />
							<h:outputText value="Sigla:" />
							<p:inputText size="5"
								value="#{ElementoBacking.elementoSalvar.sigla}" required="true"
								requiredMessage="Informe a sigla do elemento!" />
						</h:panelGrid>
					</div>
					<br />

					<div align="center">
						<h:panelGrid columns="4">
							<p:commandButton value="Salvar"
								actionListener="#{ElementoBacking.salvar}"
								update=":formCadastroElemento" icon="ui-icon-disk" />
							<p:commandButton value="Limpar"
								actionListener="#{ElementoBacking.reset}"
								update=":formCadastroElemento" icon="ui-icon-cancel" />

						</h:panelGrid>
					</div>
				</p:panel>
			</h:form>


			<h:form prependId="false" id="formPesquisaElemento">
				<p:dialog id="pesquisaElemento" widgetVar="dlg" appendToBody="true" modal="true"
					header="Pesquisar Elemento" closable="true" height="450"
					width="500" resizable="false" showEffect="clip" hideEffect="clip">

					<p:dataTable var="e" value="#{ElementoBacking.listaElemento}"
						rows="10" widgetVar="ElementoTabela" paginator="true"
						id="tabelaElemento"
						emptyMessage="Nenhum registro foi encontrado, tente novamente!">
						<h:outputText value="Elementos cadastrados" />
						<p:column filterBy="#{e.descricao}">
							<f:facet name="header">
								<h:outputText value="Descrição" />
							</f:facet>
							<h:outputText value="#{e.descricao}" />
						</p:column>
						<p:column filterBy="#{e.sigla}">
							<f:facet name="header">
								<h:outputText value="Sigla" />
							</f:facet>
							<h:outputText value="#{e.sigla}" />
						</p:column>

						<p:column>
							<f:facet name="header">
								<h:outputText value="Ações" />
							</f:facet>

							<p:commandButton value="Alterar" onclick="dlg.hide()"
								action="#{ElementoBacking.preparaAlteracao}"
								update=":formCadastroElemento" ajax="false"
								icon="ui-icon-pencil">
								<f:setPropertyActionListener
									target="#{ElementoBacking.elementoSelecionado}" value="#{e}" />
							</p:commandButton>

							<p:commandButton value="Excluir" icon="ui-icon-trash"
								update=":formPesquisaElemento"
								oncomplete="dlgDelete.show()" immediate="true" process="@all">
								<f:setPropertyActionListener
									target="#{ElementoBacking.elementoSelecionado}" value="#{e}" />
							</p:commandButton>
						</p:column>
					</p:dataTable>
				</p:dialog>

				<p:dialog id="confirmaDelete" widgetVar="dlgDelete"
					header="Excluir registro" width="230" resizable="false"
					showEffect="clip" hideEffect="clip" closable="true">
					<br />
					<div align="center">
						<h:outputText value="Deseja realmente excluir?" />
						<br /> <br />
						<p:commandButton value="Sim" action="#{ElementoBacking.delete}"
							onsuccess="dlgDelete.hide()"
							update=":formPesquisaElemento:tabelaElemento" process="@all"
							immediate="true" />
						<p:commandButton value="Não" onclick="dlgDelete.hide()" />
					</div>
				</p:dialog>
			</h:form>

		</ui:define>
	</ui:decorate>
</h:body>
</html>